<template>
  <!-- 删除提示 -->
  <el-dialog
    :title="title"
    class="center"
    :close-on-click-modal="false"
    :visible.sync="isShow"
    :modal-append-to-body="false"
    :before-close="handleDialogClose">
        <div style="color: #444;font-size: 14px;display: flex; align-items: center; margin: 20px 0px 0px 0px;">
          <img src="../../static/image/common/delect-caution.png">
          <div>{{desc}}</div>
        </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button
        type="primary"
        @click="sure"
        style="padding: 5px 25px;background-color:#EB3838;border-color:#EB3838;"
      >确 定</el-button>
      <el-button
        @click="cancel"
        style="padding: 5px 25px;background: rgb(178, 186, 211);border:rgb(178, 186, 211);color: rgb(255, 255, 255);"
      >取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'DeleteDialog',
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '删除内容'
      },
      desc: {
        type: String,
        default: '确定要删除当前内容吗？'
      },
    },
    methods: {
      sure () {
        this.$emit('close', true)
      },
      cancel () {
        this.$emit('close', null)
      },
      handleDialogClose () {
        this.$emit('close', null)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .center {
    & /deep/ .el-dialog {
      width: 380px !important;
      height: 182px !important;
      .el-dialog__header {
        padding: 7px 20px 10px 15px;
        .el-dialog__title {
          font-size: 14px;
        }
        .el-dialog__header .el-dialog__headerbtn {
          top: 7px;
          right: 15px;
        }
      }
      .el-dialog__body {
        border-top: none;
        padding-top: 0;
      }
    }
  }
</style>
